<template>
  <div class="components-container">
    <code>drag-list base on
      <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
    </code>
    <div class="editor-container">
      <dnd-list :list1="list1" :list2="list2" list1-title="List" list2-title="Article pool"/>
    </div>
  </div>
</template>

<script>
  import DndList from '@/components/DndList'
  import {fetchList} from '@/api/article'

  export default {
    name: 'DndListDemo',
    components: {DndList},
    data() {
      return {
        list1: [],
        list2: []
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.listLoading = true
        fetchList().then(response => {
          this.list1 = response.data.items.splice(0, 5)
          this.list2 = response.data.items
        })
      }
    }
  }
</script>

